<template>
    <view class="container">
        <view class="header">
            <view class="search">
                <u-search placeholder="请输入产品" v-model="keyword" :showAction="false" bgColor="#f7f8fa" @search="onSearch"></u-search>
            </view>
        </view>

        <scroll-view class="list" :scroll-y="true" :refresher-triggered="refresh" :refresher-enabled="true" @refresherrefresh="onRefresh" @scrolltolower="scrollTolower" refresher-background="" :style="{height:`${height}px`}">
            <view class="item" v-for="(item,index) in list" :key="index">
                <view class="title">
                    {{ item.products.name }}
                </view>

                <view class="line"></view>

                <view class="son-list">
                    <view class="son-item">
                        <view class="name">
                            查询次数：
                        </view>
                        <view class="value">
                            {{ item.query_num ? item.query_num : 0 }}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            您查询的防伪码：
                        </view>
                        <view class="value" @click="onCopy(item.query_code)">
                            {{ item.query_code }}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            首次查询时间：
                        </view>
                        <view class="value">
                            {{ item.query_time_text ? item.query_time_text : '-' }}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            二维码：
                        </view>
                        <view class="value" @click="onOpenQrCode(item,index)">
                            <image
                                src="/static/images/code.png"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <u-loadmore :status="status" :icon="true" />
        </scroll-view>

        <!-- 信息提示 -->
        <u-toast ref="uToast"></u-toast>

         <!-- 弹出层 -->
         <u-popup :show="show" :round="'10px'" mode="center" @close="onClose">
            <view class="qrcode">
                <u--image :showLoading="true" :src="qrCode" width="240px" height="240px"></u--image>
            </view>
        </u-popup>
    </view>
</template>
<script>
export default{
    data() {
        return {
            refresh:false,// 下拉刷新状态
            finished:false,// 上拉加载状态
            list:[],// 商品数据
            page:1,// 当前页
            business:{},// 用户数据
            status:'loadmore',// 加载状态
            keyword:'',// 关键字
            height:0,// 列表高度
            show:false,// 弹出层显示状态
            qrCode:'',// 小程序二维码
        }
    },
    methods:{
        scrollTolower()
        {
            if(this.finished) return false;

            this.status = 'loading';
            this.getProductData();
        },
        onRefresh()
        { 
            if(this.refresh) return false;

            this.refresh = true;
            this.list = [];
            this.page = 1;

            setTimeout(this.getProductData,1500);
        },
        async getProductData()
        {
            if(this.refresh)
            {
                this.refresh = false;
            }

            let params = {
                busid:this.business.id,
                page:this.page,
                keyword:this.keyword
            }

            let result = await uni.$u.http.post('/business/product',params);
            
            if(result.code === 1)
            {
                let count = result.data.count ? result.data.count : 0;
                this.list = result.data.list ? this.list.concat(result.data.list) : [];

                if(this.list.length >= count)
                {
                    this.finished = true;
                    this.status = 'nomore';

                    return false;
                }

                this.page += 1;

            }else{
                this.finished = true;
                this.status = 'nomore';
                this.$refs.uToast.show({
                    type:'error',
                    message:result.msg
                })
            }
        },
        onSearch()
        {
            this.onRefresh();
        },
        onClose()
        {
            this.show = false;
            this.qrCode = '';
        },
        async onOpenQrCode(item,index)
        {
            if(item.query_cord){
                this.qrCode = item.query_cord_text;
            }else{
                let params = {
                    code:item.query_code
                }

                let result = await uni.$u.http.post('/business/generate',params);
                if(result.code === 1)
                {
                    // 赋值，防止用户多次点同一个防伪码
                    this.list[index].query_qrcord_text = result.data.query_qrcord_text;
                    this.list[index].query_qrcord = result.data.query_qrcord;
                    this.qrCode = result.data.query_qrcord_text;
                }else{
                    this.$refs.uToast.show({
                        type:'error',
                        message:result.msg
                    })

                    return false;
                }

            }
            this.show = true;
        },
        onCopy(code)
        {
            // 先把this存起来
            let that = this;

            uni.setClipboardData({
                data: code,
                success: function () {
                    uni.hideToast();

                    that.$refs.uToast.show({
                        type:'success',
                        message:'复制成功'
                    })
                }
            });
        }
    },
    onLoad()
    {
        this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {};

        this.getProductData();

        uni.getSystemInfo({
            success:(res) =>
            {
                this.height = res.windowHeight;
            }
        })
    }
}
</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.header{
    background-color: #fff;
    padding: 10px 0;
    margin-top: 10px;
    border-radius: 10px;
}

.header .search{
    width: 95%;
    margin: 0 auto;
}

.item{
    background:#fff;
    border-radius: 10px;
    overflow:hidden;
    margin-top:10px;
    padding:0 10px 10px;
}

.item .title{
    padding:10px 0 10px 10px;
    font-size: 20px;
}

.item .line{
    width:100%;
    height:1px;
    background:#ebebeb;
    margin:0 auto;
    margin-bottom:10px;
}

.item .son-list .son-item{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:10px;
}

.item .son-list .son-item .name{
    color:#9b9b9a;
}

.item .son-list .son-item image{
    width: 30px;
    height: 30px;
}
</style>